<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>员工管理</el-breadcrumb-item>
            <el-breadcrumb-item>添加员工</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <el-form ref="addform" :rules="rules" label-width="100px" size="mini" class="demo-ruleForm"
                :model="addform">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item label="部门:" prop="deptId">
                            <el-select v-model="addform.deptId" placeholder="请选择部门">
                               <el-option
                                 v-for="dept in deptList"
                                 :key="dept.id"
                                 :label="dept.name"
                                 :value="dept.id"
                               ></el-option>
                             </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="职位:" prop="jobId">
                            <el-select v-model="addform.jobId" placeholder="请选择职位">
                               <el-option
                                 v-for="job in jobList"
                                 :key="job.id"
                                 :label="job.name"
                                 :value="job.id"
                               ></el-option>
                             </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="姓 名:" prop="employeeName">
                            <el-input v-model="addform.employeeName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="银行卡号:" prop="cardId">
                            <el-input v-model="addform.cardId"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="地 址:" prop="address">
                            <el-input v-model="addform.address"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="通行ID:" prop="postCode">
                            <el-input v-model="addform.postCode"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="电话:" prop="tel">
                            <el-input v-model="addform.tel"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="手机号:" prop="phone">
                            <el-input v-model="addform.phone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="QQ号:" prop="qqNum">
                            <el-input v-model="addform.qqNum"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="邮箱:" prop="email">
                            <el-input v-model="addform.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="性 别:" prop="sex">
                            <el-select v-model="addform.sex" placeholder="请选择性别">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="组织身份" prop="party">
                            <el-input v-model="addform.party"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="出生日期:" prop="birthday">
                            <el-input v-model="addform.birthday" type="date" format="yyyy-MM-dd"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="民 族:" prop="race">
                            <el-input v-model="addform.race"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="学 历:" prop="education">
                            <el-input v-model="addform.education"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="专业特长:" prop="speciality">
                            <el-input v-model="addform.speciality"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="爱 好:" prop="hobby">
                            <el-input v-model="addform.hobby"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="标 签:" prop="remark">
                            <el-input v-model="addform.remark"></el-input>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row :gutter="20">
                    <el-col :span="2">
                        <el-form-item>
                            <el-button type="primary" size="small" @click="addbtn(addform)">添加</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="2">
                        <el-form-item>
                            <el-button @click="resetForm('addform')">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>

<script>
export default {
    created(){
        this.getDeptList();
        this.getJobList();
    },
    data() {
        return {
            // 部门列表
            deptList:[],
            // 职位列表
            jobList:[],
            addform: {
                deptId: "",
                jobId: "",
                employeeName: "",
                cardId: "",
                address: "",
                postCode: "",
                tel: "",
                phone: "",
                qqNum: "",
                email: "",
                sex: "",
                party: "",
                birthday: "",
                race: "",
                education: "",
                speciality: "",
                hobby: "",
                remark: ""

            },
            rules: {
                deptId: [
                    // { required: true, message: "请选择部门", trigger: "blur" },
                    // { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" }
                ],
                jobId: [
                    // { required: true, message: "请输入职位ID", trigger: "blur" },
                    // // { min: 1, max: 5, message: "长度在 1 到 5 个字符", trigger: "blur" }
                ],
                employeeName: [
                    // { required: true, message: "请输入姓名", trigger: "blur" },
                    // { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
                ],
                cardId: [
                    // { required: false, message: "请输入银行卡号", trigger: "blur" },
                    // { min: 16, max: 19, message: "长度在 16 到 19 个字符", trigger: "blur" }
                ],
                address: [
                    // { required: false, message: "请输入地址", trigger: "blur" },
                    // { min: 2, max: 25, message: "长度在 2 到 25 个字符", trigger: "blur" }
                ],
                postCode: [
                    // { required: true, message: "请输入通行码", trigger: "blur" },
                    // { min: 6, max: 6, message: "长度为 6 个字符", trigger: "blur" }
                ],
                tel: [
                    // { required: false, message: "请输入电话", trigger: "blur" },
                    // { min: 10, max: 15, message: "长度为 11 到 15个字符", trigger: "blur" }
                ],
                phone: [
                    // { required: false, message: "请输入手机号", trigger: "blur" },
                    // { min: 11, max: 11, message: "长度为 11 个字符", trigger: "blur" }
                ],
                qqNum: [
                    // { required: false, message: "请输入QQ号", trigger: "blur" },
                    // { min: 5, max: 15, message: "长度在 5 到 15 个字符", trigger: "blur" }
                ],
                email: [
                    // { required: false, message: "请输入邮箱", trigger: "blur" },
                    // { type: "email", message: "邮箱格式不正确", trigger: "blur" }
                ],
                sex: [
                    // { required: false, message: "请输入性别", trigger: "blur" },
                    // { min: 1, max: 1, message: "长度为 1 个字符", trigger: "blur" }
                ],
                party: [
                    // { required: false, message: "请输入组织身份", trigger: "blur" },
                    // { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
                ],
                birthday: [
                    // { required: false, message: "请输入出生日期", trigger: "blur" },
                    // {
                    //     validator: (rule, value, callback) => {
                    //         const regEx = /^\d{4}-\d{2}-\d{2}$/; // YYYY-MM-DD
                    //         if (value && !regEx.test(value)) {
                    //             callback(new Error("日期格式不正确"));
                    //         } else {
                    //             callback();
                    //         }
                    //     },
                    //     trigger: "blur"
                    // }
                ],
                race: [
                    // { required: false, message: "请输入民族", trigger: "blur" },
                    // { min: 1, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
                ],
                education: [
                    // { required: false, message: "请输入学历", trigger: "blur" },
                    // { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
                ],
                speciality: [
                    // { required: false, message: "请输入专业特长", trigger: "blur" },
                    // { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
                ],
                hobby: [
                    // { required: false, message: "请输入爱好", trigger: "blur" },
                    // { min: 2, max: 15, message: "长度在 2 到 15 个字符", trigger: "blur" }
                ],
                remark: [
                    // { required: false, message: "请输入标 签", trigger: "blur" },
                    // { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        //部门查询
        async getDeptList(){
            const { data: res } = await this.$http.get("/dept/list");
            // console.log(res);
            if (res.code === 200) {
              this.deptList = res.data; // 更新部门列表
            } else {
              this.$message.error(res.message);
            }
            
        },
        //职位查询
        async getJobList(){
            const { data: res } = await this.$http.post("/job/findAll");
            console.log(res);
            if (res.code === 200) {
              this.jobList = res.data; // 更新职位列表
            } else {
              this.$message.error(res.message);
            }
        },
        // 重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        async addbtn() {
            this.$refs.addform.validate(async (valid) => {
                if (valid) {
                    // 格式化生日为字符串
                    if (this.addform.birthday) {
                        console.log("生日格式化：" + this.addform.birthday);
                        
                        this.addform.birthday = new Date(this.addform.birthday).toISOString();
                    }
                        // 发送请求
                        const { data: res } = await this.$http.post("/employee/add", this.addform);
                        if (res.code == 200) {
                            this.$message({
                                message: "添加成功",
                                type: "success"
                            });
                            this.$router.push("/employee");
                        } else {
                            this.$message.error("添加失败");
                        }
                        //
                    } else {
                        this.$message.error("表单验证失败，请检查输入"); // 提示用户
                        return false;
                    }
                });
        }
    }
};
</script>

<style>
.el-select {
    width: 100%;
}
</style>